<template>
	<div>
		<div>
			
			<el-table :data="adminData" height="500">
				<el-table-column fixed prop="id" label="ID" width="100" align="center">
				</el-table-column>

				<el-table-column fixed prop="name" label="姓名" width="120" align="center">
				</el-table-column>
				<el-table-column prop="phone" label="手机号码" width="120" align="center">
				</el-table-column>
				<el-table-column prop="telephone" label="住宅电话" width="120" align="center">
				</el-table-column>
				<el-table-column prop="address" label="联系地址" width="150" align="center">
				</el-table-column>
				<el-table-column prop="enabled" label="是否启动" width="120" align="center">
					<template slot-scope="{row}">
						<el-switch v-model="row.enabled === 1" active-color="#13ce66" inactive-color="#ff4949">
						</el-switch>
					</template>
				</el-table-column>
				<el-table-column prop="username" label="用户名" width="120" align="center">
				</el-table-column>
				<el-table-column prop="userFace" label="用户头像" width="120" align="center">
					<div class="demo-fit">
						<div class="block" v-for="fit in fits" :key="fit">
							<el-avatar shape="square" :size="100" :fit="fit" :src="adminData.userFace"></el-avatar>
						</div>
					</div>
				</el-table-column>
				<el-table-column prop="remark" label="备注" width="120" align="center">
				</el-table-column>

				<el-table-column fixed="right" label="操作" align="center" width="300">
					<template slot-scope="scope">
						<el-button type="warning" @click="authorization(scope.$index, scope.row)">授权</el-button>
						<el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
						<el-button type="primary" @click="handleEdit(scope.$index, scope.row) ">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
			
			<!-- 修改模态框 -->
			<el-dialog title="修改" :visible.sync="dialogFormVisible01">
				<el-form :model="TAdmin">
					<el-form-item label="id" :label-width="formLabelWidth">
						<el-input :disabled="true" v-model="TAdmin.id" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="姓名" :label-width="formLabelWidth">
						<el-input v-model="TAdmin.name" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="手机号码" :label-width="formLabelWidth">
						<el-input v-model="TAdmin.phone" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="住宅电话" :label-width="formLabelWidth">
						<el-input v-model="TAdmin.telephone" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="联系地址" :label-width="formLabelWidth">
						<el-input v-model="TAdmin.address" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="是否启用" :label-width="formLabelWidth">
						<!-- <el-input v-model="TAdmin.enabled" autocomplete="off"></el-input> -->
						<el-switch active-text="启用" inactive-text="禁用" v-model="TAdmin.enabled" active-color="#13ce66"
							</el-switch>

					</el-form-item>
					<el-form-item label="用户名" :label-width="formLabelWidth">
						<el-input v-model="TAdmin.username" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="用户头像" :label-width="formLabelWidth">
						<el-upload action="#" list-type="picture-card" :auto-upload="false">
							<i slot="default" class="el-icon-plus"></i>
							<div slot="file" slot-scope="{file}">
								<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
								<span class="el-upload-list__item-actions">
									<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
										<i class="el-icon-zoom-in"></i>
									</span>
									<span v-if="!disabled" class="el-upload-list__item-delete"
										@click="handleDownload(file)">
										<i class="el-icon-download"></i>
									</span>
									<span v-if="!disabled" class="el-upload-list__item-delete"
										@click="handleRemove(file)">
										<i class="el-icon-delete"></i>
									</span>
								</span>
							</div>
						</el-upload>
						<el-dialog :visible.sync="dialogVisible">
							<img width="100%" :src="dialogImageUrl" alt="">
						</el-dialog>
					</el-form-item>
					<el-form-item label="备注" :label-width="formLabelWidth">
						<el-input v-model="TAdmin.remark" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible01 = false">取 消</el-button>
					<el-button type="primary" @click="updateTAdmin()">确 定</el-button>
				</div>
			</el-dialog>


			<!-- 授权-->
			<el-dialog title="授权" :visible.sync="dialogFormVisible02">

				<el-form >
					<el-form-item label="角色">
						<el-select v-model="tRoleIds" multiple placeholder="请选择">
							<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible02 = false">取 消</el-button>
					<el-button type="primary" @click="updateAdminRole()">确 定</el-button>
				</div>
			</el-dialog>

		</div>


	</div>
</template>

<script>
	export default {
		mounted() {
			this.queryAll();
		},
		methods: {
			handleEdit(index, row) {
				console.log(index, row);
				this.dialogFormVisible01 = true;
				this.TAdmin = JSON.parse(JSON.stringify(row));
			},
			handleDelete(index, row) {
				console.log(row.id)
				this.$confirm('此操作将永久删除, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$deleteRequest("/tAdmin/deleteTAdmin/" + row.id).then(res => {
						this.queryAll();
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});

			},
			updateTAdmin() {
				this.TAdmin.enabled = this.TAdmin.enabled === true ? 1 : 0;
				this.$postRequest("/tAdmin/insertAndUpdateTAdmin", this.TAdmin).then(res => {
					this.dialogFormVisible01 = false;
					this.queryAll();
					this.TAdmin.userFace = '';
				})
			},
			
			queryAll() {
				this.$postRequest("/tAdmin/queryAll").then(res => {
					this.adminData = res.data.adminList;
				});
			},

			filterNode(value, data, val) {
				if (!value) return true;
				return data.label.indexOf(value) !== -1;
			},
			//头像上传方法
			handleRemove(file) {
				console.log(file);
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			handleDownload(file) {
				console.log(file);
			},
			//给用户授权角色
			authorization(index, row) {
				this.adminRoleObj.aid = row.id;
				
				this.$postRequest("/tAdmin/getAdminRole/"+row.id).then(res => {
					this.tRoleIds= res.data.adminRoleList
				});
				this.dialogFormVisible02 = true;
				this.$postRequest("/tRole/queryTRoleList").then(res => {
					this.options = res.data.roleList;
				});
			},
			updateAdminRole() {
				
				this.adminRoleObj.rids = this.tRoleIds;
				console.log(this.adminRoleObj);
				this.$postRequest("/tAdmin/authToAdmin/", this.adminRoleObj).then(res => {
				});
				this.dialogFormVisible02 = false;
				this.queryAll();
			}
		},

		data() {
			return {
				fits: ['cover'],
				value: true,
				TAdmin: {
					id: null,
					name: '',
					phone: '',
					telephone: '',
					address: '',
					enabled: 1,
					username: '',
					userFace: '',
					remarks: ''
				},
				formLabelWidth: '120px',
				dialogFormVisible02: false,
				dialogFormVisible01: false,
				dialogFormVisible: false,
				adminData: [],
				id: 1,
				//头像上传属性
				dialogImageUrl: '',
				dialogVisible: false,
				disabled: false,
				//授权
				options: [],
				tRoleIds: [],
				adminRoleObj: {
					aid: '',
					rids: [],
				}
			};
		}
	};
</script>

<style>
	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
</style>